<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
	<meta charset="utf-8">
	<title>贪吃蛇小游戏</title>
	<script type="text/javascript" src="tcs.js"></script>

	<script>

	</script>
</head>
<body>
	<!-- <h1>贪吃蛇小游戏</h1> -->
	<div align="left" class="a">
		游戏规则：<br>
		1.初始分数为=0、初始速度为1！<br>
		2.操作蛇移动，使蛇可以吃到红色的食物!<br>
		3.每当我的分数每次达到100分时，当前速度就会提高一个等级！<br>
		4.最高速度为10.相信能力强的人可以达到最高速度！<br>
		5.当蛇的碰到墙体或者自己的身子的时候，会宣布游戏失败！<br>
		<button type="button" id="btnStart" onclick="start()" class="button red"> 开始游戏</button>
		<div id="divMsg" style="text-align: center;height: 15px; color: red;  font-weight: bold;"></div>
	</div>
	<style>
body{
	text-align: center;
	background-color: white;
}
#snake{
	margin-top: 20px;
}
.a{ 
	margin-left: 20px;
	width: 690px;
	font-size: 14px;
	line-height: 24px;
 
}
.button{
width: 140px;
line-height: 38px;
text-align: center;
font-weight: bold;
color: #fff;
text-shadow:1px 1px 1px #333;
border-radius: 5px;
margin:0 20px 20px 0;
position: relative;
overflow: hidden;
}
.button:nth-child(6n){
margin-right: 0;
}
.button.red{
border:1px solid #b42323;
box-shadow: 0 1px 2px #e99494 inset,0 -1px 0 #954b4b inset,0 -2px 3px #e99494 inset;
background: -webkit-linear-gradient(top,#d53939,#b92929);
background: -moz-linear-gradient(top,#d53939,#b92929);
background: linear-gradient(top,#d53939,#b92929);
}
	</style>
	<canvas id="snake" width="" height=""></canvas>

	<h3 id="score">我的得分：0</h3>
	<h3 id="speed">当前速度：1</h3>

	<script>
		var snake = new Snake("snake","score","speed",36,36);
		function start(){ 
			snake.init(); 
			document.getElementById("divMsg").innerHTML='';
			document.getElementById("btnStart").disabled=true;
		}  
	</script>
</body>